<template>
  <div class="student_warp">
    <componentsHeader></componentsHeader>
    <div class="student_content">
      <div class="modular">
        <img src="/static/images/1@2x.png" alt="" @click="dialogTableVisible = true">
        <img src="/static/images/2@2x.png" alt="" @click="dialogTableVisible = true">
      </div>
      <div class="student_foot">
        <div class="foot_list">
          <ul>
            <li>关于我们</li>
            <li class="cut_line"></li>
            <li>使用指南</li>
            <li class="cut_line"></li>
            <li>联系我们</li>
          </ul>
        </div>
        <p>该系统由湖南中德安普大数据网络科技有限公司提供技术支持 Copyright 2021 中德安普大数据服务中心<!-- 湖南中德安普大数据网络科技有限公司 © 版权所有 湘ICP备16009530号-2 --></p>
      </div>
    </div>
    <div class="frame_box">
      <el-dialog title="" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
        <div class="select_box" style="margin-right: 42px;" @click="goTrainingCenter">
          <p>大数据审计
            基本技能竞赛</p>
        </div>
        <div class="select_box" @click="goTrainingCenter">
          <p>大数据经管和
            内控审计技能
            竞赛</p>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import componentsHeader from "@/components/header/header.vue";
  export default {
    name: "student",
    data() {
      return {
        dialogTableVisible: false,
      }
    },
    components: {
      componentsHeader,
    },
    methods: {
      goTrainingCenter(){
        this.$router.push({
          // path: '/student/trainingCenter'
          path: '/home'
        })

      },
    },
    watch: {

    }
  }
</script>

<style lang="less" scoped="scoped">
  .student_warp {
    .frame_box {
      /deep/.el-dialog {
        width: 432px;
        height: 260px;
        background: #FFFFFF;
        box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.7);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .el-dialog__body {
          display: flex;
          justify-content: center;
          align-items: center;

          .select_box {
            width: 139px;
            height: 139px;
            background: url("/static/images/ocal4@2x.png") no-repeat;
            background-size: 100% 100%;
            position: relative;

            p {
              width: 98px;
              font-size: 16px;
              font-family: PingFangSC-Bold, PingFang SC;
              font-weight: bold;
              color: #FFFFFF;
              line-height: 24px;
              text-align: center;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);

            }
          }
        }
      }
    }

    .student_content {
      background: url("/static/images/bg_index@2x.png") no-repeat;
      background-size: 100% 100%;
      height: calc(100vh - 70px);

      .modular {
        width: 726px;
        margin: 0 auto;
        padding-top: 183px;

        img {
          width: 334px;
          cursor: pointer;

          &:first-child {
            margin-right: 53px;
          }
        }
      }

      .student_foot {
        position: absolute;
        bottom: 46px;
        left: 50%;
        transform: translateX(-50%);

        .foot_list {
          display: flex;
          align-items: center;
          margin-bottom: 12px;

          ul {
            overflow: hidden;
            margin: 0 auto;

            li {
              float: left;
              font-size: 16px;
              color: #666666;
              line-height: 22px;
            }

            .cut_line {
              width: 1px;
              height: 14px;
              background: #DCE0E3;
              margin: 0 15px;
              margin-top: 5px;
            }
          }
        }

        p {
          text-align: center;
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
</style>
